<template>
  <div class="box index">
    <header>
      <ul class="seek_box flex-col box-sizing">
        <li class="left text-c flex-col flex-middle" @click="toRouter('city')">
          <span>{{city.name}}</span>
          <i class="iconfont icon-jiantou1"></i>
        </li>
        <li class="box-sizing box1 center">
          <div class="seek flex-col full box-sizing bgfff" @click="toRouter('seek/0')">
            <div class="padding-lr5 box-center">
              <i class="iconfont icon-sousuo font-20"></i>
            </div>
            <div class="box1">
              <input class="full" type="text" readonly placeholder="请输入关键字找楼盘">
            </div>
          </div>
        </li>
        <li class="right box-center" @click="toRouter('msg_list')">
          <i class="iconfont icon-xiaoxi font-18"></i>
        </li>
      </ul>
      <div id="swiper">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide box-center img-bg" v-for="it in banner" :key="it.id" data-code="it.headImgCode" :style="{backgroundImage:`url(${it.imgUrl})`}"></div>
            <!-- <div class="swiper-slide box-center">Slide 2</div>
          <div class="swiper-slide box-center">Slide 3</div> -->
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination">
          </div>
          <!-- 如果需要导航按钮 -->
          <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
          <!-- 如果需要滚动条 -->
          <!-- <div class="swiper-scrollbar"></div> -->
        </div>
      </div>
      <div class="ad padding-lr15 bgfff" @click="toRouter('money_top')">
        <span class="font-16">佣金
          <span class="cred">榜单</span>：</span>
        <span class="font-12 c82">蓝先生推荐成交21组，佣金45.2万，荣登榜首。</span>
      </div>
    </header>
    <main class="margin-t10">
      <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" v-infinite-scroll="loadBottom" infinite-scroll-disabled="moreLoading" ref="loadmore">
        <ul class="index_list padding-lr15 bgfff">
          <li class="flex-col border-b" v-for="(it,i) in houseList" data-id="housesCode" :key="i" @click="toRouter('houses_info',{houseCode:it.housesCode})">
            <div class="it_bg img-bg" :style="{backgroundImage:`url(${it.housesImgurl})`}"></div>
            <div class="it_info box1">
              <div class="padding-b10">{{it.housesName}}</div>
              <div class="font-12 c82 padding-b5 ">参考价格：￥{{it.housesPrice}}</div>
              <div class="font-12 c82 padding-b10 box-space">住宅类型：{{it.housesBulidType}}
                <span class="cred">{{it.distance}}</span>
              </div>
              <div class="btn cred" @click.stop>
                <i class="iconfont icon-dianhua1"></i>
                <a :href="'tel:'+it.housesPhone" class="cred text-none">{{it.housesPhone}}</a>
              </div>
            </div>
          </li>
          <li class="empty-it c82 box-center" v-show="!houseList.length">暂无数据</li>
        </ul>
        <div slot="top" class="mint-loadmore-top box-center">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
          <mt-spinner v-show="topStatus === 'loading'" type="snake" color="#26a2ff" :size="22"></mt-spinner>
        </div>
        <!--底部判断是加载图标还是提示“全部加载”-->
        <div class="more_loading padding-15 text-c font-12 c81" v-show="!queryLoading">
          <div v-show="moreLoading&&!allLoaded" class="box-middle">
            <mt-spinner type="fading-circle" color="#8f9092" :size="22"></mt-spinner>
            <span class="margin-l10">加载中。。。</span>
          </div>
          <span v-show="allLoaded">已全部加载</span>
        </div>
      </mt-loadmore>
      <!-- <ul class="index_list padding-lr15 bgfff">
        <li class="flex-col border-b" v-for="(it,i) in houseList" data-id="housesCode" :key="i" @click="toRouter('houses_info',{houseCode:it.housesCode})">
          <div class="it_bg img-bg" :style="{backgroundImage:`url(${it.housesImgurl})`}"></div>
          <div class="it_info box1">
            <div class="padding-b10">{{it.housesName}}</div>
            <div class="font-12 c82 padding-b5 ">参考价格：￥{{it.housesPrice}}</div>
            <div class="font-12 c82 padding-b10 box-space">住宅类型：{{it.housesBulidType}}
              <span class="cred">{{it.distance}}</span>
            </div>
            <div class="btn cred" @click.stop>
              <i class="iconfont icon-dianhua1"></i>
              <a :href="'tel:'+it.housesPhone" class="cred text-none">{{it.housesPhone}}</a>
            </div>
          </div>
        </li>
        <li class="empty-it c82 box-center" v-show="!houseList.length">暂无数据</li>
      </ul> -->
    </main>
    <v-header></v-header>
    <!-- <v-pop v-if="pop" v-on:childMethod="JumpToWeCaht"></v-pop> -->
    <div id="allmap" class="hidden"></div>
  </div>
</template>

<script>
import header from "../../components/index_nav";
import pop from "../../components/pop";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import { Loadmore, Spinner } from "mint-ui";
import { MP } from "../../js/bmap.js";

const wx = require("weixin-js-sdk");
import CONFIG from "../../js/CONFIG.js";
// Vue.use(InfiniteScroll);
export default {
  name: "index",
  data() {
    return {
      banner: [],
      houseList: [],
      point: {},
      hasLoca: 0,
      pop: false
    };
  },
  components: {
    "v-header": header,
    "mt-loadmore": Loadmore,
    "mt-spinner": Spinner,
    "v-pop": pop
  },
  computed: {
    // hasPop(){
    //   return this.$store.state.commonStore.hasPop;
    // }
  },
  watch: {
    city(val) {
      this.getHouseList();
    }
    // point(val) {
    //   this.getHouseList();
    // }
  },
  activated() {
    // this.city = this.$store.state.commonStore.city;
    this.getHouseList();
  },
  created() {
    this.$store.commit("index_nav", 0);
    this.getBanner();

    if (!this.getCache("token") || this.getCache("token") == "undefined") {
      // this.pop = true;
      this.alert("更多精彩需要微信授权", 2, () => {
        this.JumpToWeCaht();
      });
    } else {
      this.updateUserInfo();
    }

    // let url = window.location.href.split("?")[1];
    // if (url) {
    //   let obj = this.getRequest(url);
    //   if (obj["userCode"]) {
    //     this.JumpToWeCaht(obj["userCode"],obj["houseCode"]);
    //   } else if (!this.getCache("token") || this.getCache("token") == "undefined") {
    //     this.JumpToWeCaht();
    //   }
    // }
  },
  computed: {
    city() {
      return this.$store.state.commonStore.city;
    }
    // point() {
    //   return this.$store.state.commonStore.point;
    // }
  },
  mounted() {
    // this.city = this.$store.state.commonStore.city;
    let that = this;

    this.getHouseList();
    this.$nextTick(function() {
      that.swiperInit();
      MP()
        .then(BMap => {
          // 百度地图API功能
          var map = new BMap.Map("allmap");
          var point = new BMap.Point(116.331398, 39.897445);
          map.centerAndZoom(point, 12);

          var geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition(
            function(r) {
              if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                that.point = r.point;
                // that.$store.commit("location", r.point);
                that.setCache("point", r.point);
                // alert();
                console.log("您的位置：" + r.point.lng + "," + r.point.lat);
              } else {
                that.setCache("point", { lng: 0, lat: 0 });
                // alert("failed" + this.getStatus());
              }
              that.getHouseList();
            },
            { enableHighAccuracy: true }
          );
        })
        .catch(res => {
          that.setCache("point", { lng: 0, lat: 0 });
          that.getHouseList();
        });
      // that.qrcode();
    });

    /*router.beforeEach((to, from, next) => {
      if (cache.get("id") && to.path === "/login") {
        next("/index");
      } else if (!cache.get("id") && to.path !== "/login") {
        next("/login");
      } else {
        next();
      }
    });*/
  },
  methods: {
    JumpToWeCaht() {
      let THIS = this;
      let returnURL = CONFIG.WeChat.WeChatOauth;

      // THIS.setLCDATABEFORELOGO();

      let _uid = this.$route.query.yqid || 1;

      // return false
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        CONFIG.WeChat.appid +
        "&redirect_uri=" +
        returnURL +
        "&response_type=code&scope=snsapi_userinfo&state=" +
        _uid +
        "#wechat_redirect";
    },
    loadTop() {
      // 刷新
      // setTimeout(() => {
      this.houseList = [];
      this.getHouseList();
      this.$refs.loadmore.onTopLoaded();
      // }, 2000);
    },
    loadBottom() {
      // 上拉加载更多
      if (this.allLoaded) {
        this.moreLoading = true;
        return;
      }
      if (this.queryLoading) {
        return;
      }
      this.moreLoading = !this.queryLoading;

      if (this.totalPage < this.page++) {
        this.moreLoading = this.allLoaded;
        this.allLoaded = true;
      }
      this.getHouseList();
    },
    //初始化swiper
    swiperInit() {
      new Swiper(".swiper-container", {
        autoplay: 5000, //可选选项，自动滑动
        pagination: ".swiper-pagination",
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
      });
    },
    // 获取房源列表
    getHouseList(has = false) {
      let that = this,
        page = 0;
      if (!has) this.page = 0;
      page = this.hasPage(has); //需要分页

      let ops = {
        page,
        limit: that.limit,
        housesCityCode: that.city.id
      };

      if (that.getCache("point")) {
        ops["lng"] = that.getCache("point").lng;
        ops["lat"] = that.getCache("point").lat;
      }

      if (!page) return;
      this.http.get("houses/list", ops).then(res => {
        that.totalPage = res.totalPage;
        if (has) {
          that.houseList.push(res.data.list);
        } else {
          that.houseList = res.data.list;
        }
      });
    },
    // 获取banner图
    getBanner() {
      let that = this;
      this.http
        .get("headimg/list", {
          page: 1,
          limit: that.limit
        })
        .then(res => {
          that.banner = res.data.list;
        });
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../css/list.scss";
.index {
  padding-bottom: 0.5rem;
  header {
    .seek_box {
      height: 0.45rem;
      .left,
      .right {
        padding: 0 0.15rem;
        line-height: 0.45rem;
      }
      .center {
        padding: 0.08rem 0;
      }
      .seek {
        border-radius: 0.05rem;
        overflow: hidden;
      }
    }
    #swiper {
      // height: 1.8rem;
      padding-bottom: 50%;
      position: relative;
      background: #aaa;
      .swiper-container {
        height: 100%;
        width: 100%;
        position: absolute;
      }
      .swiper-pagination {
        .swiper-pagination-bullet {
          background: #fff !important;
          opacity: 1;
        }
      }
    }
    .ad {
      height: 0.42rem;
      line-height: 0.42rem;
    }
  }
}
</style>
